@import "../config/settings";

.tokenfield {
  height: auto;
  padding: var(--#{$cdk}size-6) var(--#{$cdk}size-8);

  input.token-input[type="text"] {
    display: inline-block;
    max-width: 100%;
    background-color: transparent;
    border: 0;
    outline: none;
  }

  .token {
    display: inline-block;
    padding: var(--#{$cdk}size-2) var(--#{$cdk}size-4) var(--#{$cdk}size-2) var(--#{$cdk}size-6);
    margin: var(--#{$cdk}size-2);
    font-size: var(--#{$cdk}size-12);
    font-weight: 700;
    color: var(--#{$cdk}primary-800);
    text-align: center;
    vertical-align: middle;
    background-color: var(--#{$cdk}primary-300);

    &.invalid {
      background-color: var(--#{$cdk}yellow-500);
    }

    > .token-label {
      display: inline-block;
      line-height: var(--#{$cdk}size-20);
      white-space: nowrap;
    }

    .close {
      align-content: center;
      width: var(--#{$cdk}size-20);
      height: var(--#{$cdk}size-20);
      padding-inline: var(--#{$cdk}size-2);
      margin: 0 0 0 var(--#{$cdk}size-6);
      font-size: var(--#{$cdk}size-18);
      font-weight: 400;
      line-height: var(--#{$cdk}size-20);
      color: var(--#{$cdk}primary-800);
      text-decoration: none;
      text-shadow: none;
      background-color: var(--#{$cdk}primary-300);
      border-radius: 50%;
      opacity: 1;
      transition: var(--#{$cdk}default-transition);

      &:hover {
        color: var(--#{$cdk}primary-800);
        background-color: var(--#{$cdk}primary-400);
        opacity: 1;
      }
    }
  }

  .token-input {
    /* stylelint-disable declaration-no-important */
    width: auto !important;
    /* stylelint-enable declaration-no-important */
  }
}

#attributes-generator {
  .tokenfield {
    .token-input {
      /* stylelint-disable-next-line declaration-no-important */
      width: 100% !important;
    }
  }
}

.locale-input-group:not(.d-flex) {
  .js-taggable-field {
    width: 80%;
  }
}
